import React, { useRef, useEffect, useState } from 'react';  
import * as echarts from 'echarts';  
import '../ccss/Youxia.css'
// 假设Dry1Option是您在问题中提供的默认配置  
const Dry1Option = {  
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['广东', '杭州', '西安', '青岛', '上海', '北京']
  },
  series: [
    
    {
      type: 'bar',
      data: [119325, 173438, 310000, 321594, 434141, 681807]
    }
  ]
};  
const Dry2Option = {  
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['广东', '广州', '西安', '上海', '北京', '杭州']
  },
  series: [
    
    {
      type: 'bar',
      data: [119325, 173438, 310000, 321594, 434141, 681807]
    }
  ]
}; 
const Dry3Option = {  
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['广东', '杭州', '西安', '青岛', '天津', '北京']
  },
  series: [
    
    {
      type: 'bar',
      data: [119325, 173438, 310000, 321594, 434141, 681807]
    }
  ]
};  

function Youxia() {  
  const [activeTab, setActiveTab] = useState('chart1');  
  const [chartOptions, setChartOptions] = useState(Dry1Option); // 假设Dry1Option是您提供的默认配置  
  // 假设您有多个图表的配置，这里只是示例  
  const chartOptionsMap = {  
    chart1: Dry1Option,  
    chart2: Dry2Option,  
    chart3: Dry3Option,  
    // ... 其他图表的配置  
  };  
  // 切换标签的函数  
  const handleTabClick = (tab: string) => {  
    setActiveTab(tab);  
    // 设置新的图表配置  
    setChartOptions(chartOptionsMap[tab] || Dry1Option); // 如果没有找到对应配置，则使用默认配置  
  };  
  // 使用ref来存储DOM元素的引用  
  const chartRef = useRef(null);  
  // 使用useEffect来在组件挂载后初始化图表，并在更新配置时更新图表  
  useEffect(() => {  
    if (chartRef.current) {  
      // 初始化图表  
      const myChart = echarts.init(chartRef.current);  
      // 渲染图表  
      myChart.setOption(chartOptions);  
      // 当组件卸载时，释放图表实例  
      return () => {  
        if (myChart) {  
          myChart.dispose();  
        }  
      };  
    }  
  }, [chartOptions]); // 当chartOptions变化时重新渲染图表  
  // 根据当前激活的标签渲染不同的“图表容器”  
  let chartContainer;  
  if (activeTab) {  
    chartContainer = (  
      <div ref={chartRef} style={{ width: '22vw', height: '30vh' }}>  
        {/* 图表将渲染在这里 */}  
        
      </div>  
    );  
  }  
  // 渲染标签按钮和图表容器  
  return (  
    <div>  
      <button onClick={() => handleTabClick('chart1')}>设计</button>  
      <button onClick={() => handleTabClick('chart2')}>开发</button>  
      <button onClick={() => handleTabClick('chart3')}>元宇宙</button>  
      {chartContainer}  
    </div>  
  );  
}  
 
  
export default Youxia;